<template>
	<view>
		<template v-if="loading" >
			<template v-if="cols==''">
				<view class="ske" :style="{'background-color':bgColor?'#fff':''}">
					<view v-if="avatar" class="avatar xjs_skeletons_bg" :style="avatarStyle"></view>
					<view class="content">
						<template v-for="(item,index) in Number(props.rows)" :key="index">
							<view :style="{'height':(props.rowsHeight[index] || props.rowsHeight[0]),'width':(props.rowsWidth[index] || props.rowsWidth[0])}" class="xjs_skeletons_bg" ></view>
						</template>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="ske-col">
					<template v-for="(i,index) in Number(props.cols)" :key="index">
						<view :style="[colsStyle]" class="ske-col-item xjs_skeletons_bg"></view>
					</template>
				</view>
			</template>
		</template>
		<slot v-else></slot>
	</view>
	<!-- <skeletons :loading="true" :cols="5" colsHeight="200rpx"/>
	<skeletons :loading="true" :cols="1" />
	<skeletons :loading="true" :rows="4" :avatar="true" :rowsWidth="['100%','60%','100%','30%']" avatarShape="square" avatarSize="200rpx" /> -->
</template>

<script lang="ts" setup>
	import { computed } from 'vue';
	const props = withDefaults(
		defineProps<{
			rows : string | number,
			rowsWidth:string[],
			rowsHeight:string[],
			loading:boolean,
			avatar:boolean,
			avatarSize:string,
			avatarShape:string, //circle-圆形，square-方形
			cols:string | number, // 列数-存在优先显示一排方块
			colsHeight:string,
			bgColor:boolean
		}>(),
		{
			rows: 1,
			rowsWidth:()=>['100%'],
			rowsHeight:()=>['40rpx'],
			loading:true,
			avatar:false,
			avatarSize:"100rpx",
			avatarShape:"circle",
			cols:"",
			colsHeight:"100rpx",
			bgColor:false
		}
	)
	const avatarStyle = computed(()=>{
		return {
			'height':props.avatarSize,
			'width':props.avatarSize,
			'borderRadius':`${props.avatarShape=='circle'?'50%':'5%'}`
		}
	})
	const colsStyle = computed(()=>{
		return {
			"height":props.colsHeight,
			"width":(90 / Number(props.cols))+'%'
		}
	})
</script>
<style lang="scss" scoped>
	.xjs_skeletons_bg{
		width: 100%;
		background: linear-gradient(90deg,#F1F2F4 25%,#e6e6e6 37%,#F1F2F4 50%);
		background-size: 400% 100%;
		animation: skeleton 1.8s ease infinite;
		margin-bottom: 24rpx;
	}
	@keyframes skeleton {
		0% {
			background-position: 100% 50%
		}
		
		100% {
			background-position: 0 50%
		}
	}
	.ske{
		display: flex;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		.avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		.content{
			flex: 1;
		}
	}
	.ske-col{
		display: flex;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		justify-content: space-around;
		>.ske-col-item{
			border-radius: 5%;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>